@extends('Home.Index.index')
@section('title')
    商品分类
@endsection

@section('content')
    <section id="main">
        <div class="container_12">
            <div id="sidebar" class="grid_3">
                <aside id="categories_nav">
                    <h3>分类</h3>

                    <nav class="left_menu">
                        {{--分类列表--}}
                        <ul class="classify">
                            @foreach($classify as $res)
                            <li data-id="{{$res->c_id}}">{{$res->c_name}}</li>
                                @endforeach
                        </ul>
                    </nav><!-- .left_menu -->
                </aside><!-- #categories_nav -->

                <aside id="shop_by">

                    <h4>价格分类</h4>

                    <form action="#" class="check_opt">
                        <p><input class="niceCheck" type="checkbox" name="" value="">0.00 - $49.99 (21)</p>
                        <p><input class="niceCheck" type="checkbox" name="" value="">$50.00 - $99.99 (7)</p>
                        <p><input class="niceCheck" type="checkbox" name="" value="">0$100.00 and above (15)</p>
                    </form>
                </aside><!-- #shop_by -->

                <aside id="specials" class="specials">
                    <h3>特价商品列表</h3>

                    {{--循环输出特价商品信息--}}
                    <ul>
                        <li>
                            <div class="prev">
                                {{--商品详情链接和图片地址--}}
                                <a href=""><img src="" alt="" title="" /></a>
                            </div>

                            <div class="cont">
                                <a href="product_page.html">商品名称</a>
                                <div class="prise"><span class="old">$177.00</span>$75.00</div>
                            </div>
                        </li>
                    </ul>
                </aside><!-- #specials -->
            </div><!-- .sidebar -->


            {{--这里引入商品分类表--}}
            <div id="content" class="grid_9">
                <h1 class="page_title">商品列表</h1>
                {{--这里是继承商品列表模板--}}
                <div class="grid_product" id="goods" >
                    @foreach($goods as $res)
                    <div class="grid_3 product" >
                        <div class="prev">
                            {{--商品详情连接及图片信息--}}
                            <a href="{{url('goods_info',['goods_id'=>$res->goods_id,'c_id'=>$res->c_id])}}"><img src="{{$res->img_src}}"/></a>
                        </div><!-- .prev -->
                        <h3 class="title">{{$res->goods_name}}</h3>
                        <div class="cart">
                            <div class="price">
                                <div class="vert">
                                    <div class="price_new">￥{{$res->price}}</div>
                                </div>
                            </div>
                            <a href="#" class="obn"></a>
                            <a href="#" class="like"></a>
                            <a href="#" class="bay"></a>
                        </div><!-- .cart -->
                    </div>
                    @endforeach
                    <div class="clear"></div>

                    {!! $goods->render() !!}
                </div><!-- .grid_product -->

                {{--<div class="clear"></div>--}}
                {{--<div class="pagination">--}}
                    {{--分页模板--}}
                    {{--<ul>--}}
                        {{--<li class="prev"><span>&#8592;</span></li>--}}
                        {{--<li class="curent"><a href="#">1</a></li>--}}
                        {{--<li><a href="#">2</a></li>--}}
                        {{--<li><a href="#">3</a></li>--}}
                        {{--<li><a href="#">4</a></li>--}}
                        {{--<li><a href="#">5</a></li>--}}
                        {{--<li><span>...</span></li>--}}
                        {{--<li><a href="#">100</a></li>--}}
                        {{--<li class="next"><a href="#">&#8594;</a></li>--}}
                    {{--</ul>--}}
                {{--</div><!-- .pagination -->--}}
                {{--<p class="pagination_info">Displaying 1 to 12 (of 100 products)</p>--}}
            </div><!-- #content -->

            <div class="clear"></div>
        </div><!-- .container_12 -->
    </section><!-- #main -->

    <div class="clear"></div>

    <script>
        $(function () {
            $('.classify').on('click','li',function () {
               var c_id = $(this).attr('data-id');
               $.post('',{c_id:c_id},function (e) {
                   console.log(e);
                   var str = '';
                   if(e)
                   {
                       $.each(e,function (k,v) {
                           str += '<div class="grid_3 product">' +
                               '<div class="prev">' +
                               '<a href="/goods_info/'+v.goods_id+'/'+v.c_id+'"><img src="'+v.img_src+'"/></a>' +
                               '</div>' +
                               '<h3 class="title">'+v.goods_name +'</h3>' +
                               '<div class="cart">' +
                               '<div class="price">' +
                               '<div class="vert">' +
                               '<div class="price_new">￥ '+v.price+'</div>' +
                           '</div>' +
                           '</div>' +
                           '<a href="#" class="obn"></a>' +
                               '<a href="#" class="like"></a>' +
                               '<a href="#" class="bay"></a>' +
                               '</div>' +
                               '</div>'
                       });
                       $('#goods').html(str);
                   }else {
                       $('#goods').html('');
                       layer.msg('为找到符合条件的数据');
                   }
               })
            });
            });

    </script>

    {{--商品加入购物车js--}}
    <script>
        $(function() {
            var offset = $("#end").offset();
            $(".bay").click(function(event){
                var addcar = $(this);
                var img = $('.prev').children().children().attr('src');
                var flyer = $('<img class="u-flyer" src="'+img+'">');
                flyer.fly({
                    start: {
                        left: event.pageX,
                        top: event.pageY
                    },
                    end: {
                        left: offset.left+10,
                        top: offset.top+10,
                        width: 0,
                        height: 0
                    },
                    onEnd: function(){
                        //$("#msg").show().fadeOut(3000);
                        layer.msg('已成功加入购物车！',{icon:1});
                        addcar.css("cursor","default").removeClass('orange').unbind('click');
                        this.destory();
                    }
                });
            });

        });

    </script>
@endsection